<template>
    <el-dialog title="分配角色" :visible="showRoleDialog" @close="cancelClick">
        <el-checkbox-group v-model="checkList">
            <el-checkbox v-for="role in roleList" :key="role.id" :label="role.id">{{ role.name }}</el-checkbox>
        </el-checkbox-group>
        <div slot="footer" class="dialog-footer">
            <el-button @click="cancelClick">取 消</el-button>
            <el-button type="primary" @click="confirmClick">确 定</el-button>
        </div>
    </el-dialog>
</template>

<script>
import { getRoleList } from '@/api/setting'
import { getEmployeeBasicInfo, assignRoles } from '@/api/employees'

export default {
    name: 'AssignRole',
    props: {
        showRoleDialog: {
            type: Boolean,
            required: true
        },
        userId: {
            type: String,
            required: true
        }
    },
    data() {
        return {
            checkList: [], //当前选中（已有）的角色
            roleList: [] // 角色列表
        }
    },
    methods: {
        // 获取角色列表
        async getRoleList() {
            const { rows } = await getRoleList({page: 1, pagesize: 99})
            this.roleList = rows
        },
        // 获取员工基本信息
        async getEmployeeBasicInfo(id) {
            const { roleIds } = await getEmployeeBasicInfo(id)
            this.checkList = roleIds
        },
        // 确认操作
        async confirmClick() {
            await assignRoles({id: this.userId, roleIds: this.checkList})
            this.$message.success('分配角色成功')
            this.$emit('update:showRoleDialog', false)
        },
        // 取消操作
        cancelClick() {
            this.checkList = []
            this.$emit('update:showRoleDialog', false)
        }
    },
    created() {
        this.getRoleList()
    }
}
</script>

<style></style>